<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section id="app">
    <input v-model="inputValue" @keyup.enter="add" placeholder="请输入任务"/>
    <section>
        <ul>
            <li v-for="(item,index) in list" >
                <div>
                <span>{{index+1}}</span>
                <label>{{item}}</label>
                <button @click="remove(index)">X</button>
                </div>
            </li>
        </ul>
    </section>
  </section>

    <script src="vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                list:["多读书","多看报","少玩手机"],
                inputValue:"好好学习"
            },
            methods:{
                add:function(){
                    this.list.push(this.inputValue);
                },
                remove:function(index){
                    //console.log("delete");
                    //console.log(index);
                    this.list.splice(index,1);
                }
            }
        })
    </script>
</body>
</html>